<template>
  <div class="message">
    <a-typography>
      <a-typography-title :heading="3" style="text-align: center;">
        {{ title }}
      </a-typography-title>
      <a-row :gutter="24">
        <a-col :span="8">
          <div class="extra-item extra-item-center">发布单位：{{ publisher }}</div>
        </a-col>
        <a-col :span="8">
          <div class="extra-item extra-item-center">发布时间：{{ createdTime }}</div>
        </a-col>
        <a-col :span="8">
          <div class="extra-item extra-item-center">阅读次数：{{ readCount }}</div>
        </a-col>
      </a-row>
      <a-divider />
      <a-typography-paragraph style="font-size: 16px;" v-for="(paragraph, index) of contents" :key="`p${index}`">
        {{ paragraph }}
      </a-typography-paragraph>
      <div class="extra-item">兰州日报社全媒体记者：伊晓明  ｜  通讯员：雷 超</div>
      <div class="extra-item">责任编辑：王旭伟</div>
      <div></div>
    </a-typography>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue';
import { MyMessageData, MyMessageDetail } from '@/api/my-message';

withDefaults(defineProps<MyMessageData & MyMessageDetail>(), {
  publisher: '--',
  contents: () => [],
  attachments: () => [],
  title: '--',
  createdTime: '--',
  readCount: '--'
});
</script>

<style lang="less" scoped>
.message {
  display: flex;
  padding: 30px;
  background-color: #fff;
}
.extra-item-center {
  text-align: center;
}
.extra-item {
  color: #999;
}
</style>
